<template>
  <ContainerWrapper
      :designer="designer"
      :widget="widget"
      :parent-widget="parentWidget"
      :parent-list="parentList"
      :index-of-parent-list="indexOfParentList"
  >
    <div :key="widget.id"
         class="table-container"
         @click.stop="selectWidget(widget)"
         :class="[selected ? 'selected' : '', customClass]"
    >
      <table class="table-layout">
        <tbody class="table-body">
           {{widget.rows}}
           <tr v-for="(row, rowIdx) in widget.rows" :key="row.id">
          <template v-for="(colWidget, colIdx) in row.cols">
            <TableCellWidget
                v-if="!colWidget.merged"
                :widget="colWidget"
                :designer="designer"
                :key="colWidget.id"
                :parent-list="widget.cols"
                :row-index="rowIdx"
                :row-length="widget.rows.length"
                :col-index="colIdx"
                :col-length="row.cols.length"
                :col-array="row.cols"
                :row-array="widget.rows"
                :parent-widget="widget"/>
          </template>
        </tr>
        </tbody>
      </table>
    </div>

  </ContainerWrapper>
</template>

<script>
import containerMixin from "../containerMixin"
import designMixin from "@c/public/form-designer/designMixin"

import TableCellWidget from "./table-cell-widget.vue";
import ContainerWrapper from "@c/public/form-designer/devType/modules/containerWrapper.vue";
export default {
  name: "table-widget",

  componentName: 'ContainerWidget',

  inject: ['refList'],

  components: {
    ContainerWrapper,
    TableCellWidget
  },

  mixins: [designMixin,containerMixin],

  props: {
    widget: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
  },

  computed: {
    selected() {
      return this.widget.id === this.designer.selectedId
    },

    customClass() {
      return this.widget.options.customClass || ''
    },

  },


  created() {
    this.initRefList()
  },

  mounted() {},

  methods: {},

  // 监听
  watch: {},
}
</script>

<style lang="scss" scoped>
div.table-container {
  padding: 5px;
  border: 1px dashed #336699;
  box-sizing: border-box;

  table.table-layout {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    table-layout: fixed;

    ::v-deep td {
      height: 48px;
      border: 1px dashed #336699;
      padding: 3px;
      display: table-cell;
    }

    .form-widget-list {
      border: 1px dashed #336699;
      min-height: 36px;
    }
  }
}

.table-container.selected {
  outline: 2px solid #336699 !important;
}
</style>